<template>
  <view class="w100 bg-gray flex-sub flex flex-col">
    <view
      style="margin-top: 0"
      class="w100 flex-sub padding-lr padding-top flex-center flex-direction"
    >
      <view class="bg-white flex-0 w100 padding">
        <u-navbar :safeAreaInsetTop="true" title="转账">
          <view v-if="isAdmin" slot="left">
            <slot></slot>
          </view>
        </u-navbar>
      </view>
      <view
        style="margin-bottom: -30px"
        class="bg-white w100 padding-lr text-sm"
      >
        <u-cell :border="false">
          <view class="text-df text-bold" slot="title">转账列表</view>
          <view class="text-grey text-sm" slot="value">
            <u-button type="primary" @click="openTransferDialog">转账</u-button>
          </view>
        </u-cell>
        <Detail
          @fresh="queryList"
          :transferDialogVisible.sync="transferDialogVisible"
          :showDetail.sync="showDetail"
          :info="this.currentInfo"
        ></Detail>
      </view>
      <z-paging
        class="flex-sub padding-lr bg-white"
        ref="paging"
        :default-page-size="limit"
        v-model="transferList"
        :refresher-enabled="true"
        :auto-clean-list-when-reload="false"
        :auto-scroll-to-top-when-reload="true"
        :show-default-loading-more-text="true"
        loading-more-no-more-text="没有更多了"
        :fixed="false"
        :pagingStyle="{
          height: `calc( 100vh - ${statusBarHeight + tabHeight}px )`,
        }"
        @query="queryList"
      >
        <view
          class="rcl-notice__item"
          v-for="(item, index) in transferList"
          :key="index"
          @click="accountClick(index)"
        >
          <u-cell-group>
            <u-cell :border="false">
              <view class="flex text-cut" slot="title">
                <view
                  style="width: 100px"
                  class="flex-sub text-cut margin-left-xs text-bold"
                >
                  <span style="color: green">转入账户名：</span
                  >{{ item.target_advertiser_name }}
                </view>
              </view>

              <view
                class="text-sm flex margin-top justify-between"
                slot="label"
              >
                <view class="flex-col">
                  <view>转账时间</view>
                  <view>{{ item.create_time }}</view>
                </view>
                <view class="flex-col align-center">
                  <view>交易号</view>
                  <view>{{ item.transaction_seq }}</view>
                </view>
                <view class="flex-col align-end">
                  <view>原因</view>
                  <view>{{ item.reason }}</view>
                </view>
              </view>
            </u-cell>
            <u-cell
              style="margin-top: -10px"
              :border="false"
              value="查看详情"
              :right-icon="'arrow-right'"
              :isLink="true"
              :disabled="true"
              arrow-direction="right"
            >
              <view class="flex text-cut" slot="title">
                <view
                  style="width: 100px"
                  class="flex-sub text-cut margin-left-xs text-bold"
                >
                  <span style="color: red">转出账户名：</span
                  >{{ item.advertiser_name }}
                </view>
              </view>
            </u-cell>
          </u-cell-group>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs";
import { getTransfer } from "@/api";
import Detail from "./detail.vue";
import { mapGetters } from "vuex";

export default {
  components: { Detail },
  props: {},
  data() {
    return {
      showDetail: false,
      transferDialogVisible: false,
      currentInfo: {},
      total: 0,
      page: 1,
      limit: 10,
      keyword: "",
      statusBarHeight: 10,
      tabHeight: 0,
      transferList: [],
      tag: 0,
    };
  },
  computed: {
    ...mapGetters(["isAdmin", "curProStatus"]),
  },
  methods: {
    accountClick(idx) {
      this.currentInfo = this.transferList[idx];
      this.showDetail = true;
    },
    openTransferDialog() {
      this.transferDialogVisible = true;
    },
    queryList(pageNo, pageSize) {
      this.page = pageNo || 1;
      this.handleGetList();
    },

    async handleGetList() {
      const api = getTransfer;
      await api({
        channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
        page: this.page,
        page_size: this.limit,
      }).then(({ data }) => {
        this.$refs.paging.complete(data.list);
        // this.$refs.paging.complete([
        //   {
        //     advertiser_name: "112",
        //     target_advertiser_name: "456",
        //     create_time: " 2020",
        //     transaction_seq: "111",
        //     reason: "232424",
        //   },
        // ]);
        this.total = data.total;
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>
